<template>
	<div id="content">
		<Header />
		<div class="bread">
			<div class="cont w1200">
				<img src="../../../assets/img/location.png" alt=""><a><router-link
						to="/portal/index">首页</router-link></a> > <a><router-link
						to="/portal/net">网谷里</router-link></a>> <a>代表联络站</a>
        <a href="" class="back"><img src="../../../assets/img/back.png" alt=""><router-link
          to="/portal/net">返回上一级</router-link></a>
			</div>
		</div>
		<div class="inner">
			<div class="net w1200">
				<h3>东西湖区代表联络站</h3>
				<div class="map">
					<div ref="chart" style="width:100%;height:600px;" />
				</div>
			</div>
		</div>
		<Contact />
	</div>

</template>

<script>
import Header from '@/components/Header';
import Contact from '@/components/Contact';
import * as echarts from 'echarts';
import dongxihu from '@/assets/geo/dongxihu.json';

export default {
	data() {
		return {
			List: []
		}
	},
	components: {
		Header,
		Contact
	},
	created() {

	},
	mounted() {
		const myChart = echarts.init(this.$refs.chart);
		echarts.registerMap("dongxihu", dongxihu);
		const option = {
			series: [
				{
					type: "map",       // 设置图表类型为地图
					map: "dongxihu",     // 地图要加载的JSON文件
					zoom: 1.4,        // 地图缩放大小，这个根据自己需求，默认是1，不缩放
					layoutCenter: ["50%", "50%"],   //  定义地图中心在屏幕中的位置
					// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
					layoutSize: 650,
					aspectScale: 0.9, // 长宽比
					roam: false,
					itemStyle: {       // 这里就是设置item 的样式，也就是地图中每个区块的样式（区块就是JSON文件中包含经纬度信息的对象，获取的地图JSON文件中应该有一个数组，其中的每一个对象就对应一个区块）
						normal: {        // 区块的基本样式
							borderColor: "#fff",   // 区块的边界（边框）颜色
							borderWidth: 2,           // 区块的边界（边框）宽度
							label: {
								show: true,
								textStyle: {
									color: "#333",
									fontSize: "12px"
								}
							},
							areaColor: '#c2dfed',

						},
						emphasis: {         // 区块高亮时的样式（鼠标移入的时候可以选中进行高亮显示）
							areaColor: '#e7a672'
						},

					},
          data:[
            {name:'径河街道',id:'e371a828070048b7b07e476dfc058702'},
            {name:'长青街道',id:'e371a828070048b7b07e476dfc058702'},
            {name:'东山街道',id:'34eb416b4ce14925bd17710504931f18'},
            {name:'走马岭街道',id:'e371a828070048b7b07e476dfc058702'},
            {name:'金银湖街道',id:'a7a5c68750cb4d4494ac2300b1c98538'},
            {name:'慈惠街道',id:'9f946a9f8b0348ae9d31ce54017a7d7d'},
            {name:'常青花园街道',id:'8f80d09a33a244a2931b511c51874ac7'},
            {name:'将军路街道',id:'6ea7835696914558ba685fc0a7985d04'},
            {name:'柏泉街道',id:'2ed90557e973475b83fc1aa20a7b0e26'},
            {name:'吴家山街道',id:'69dc6b34607a4538b09c9848859fc699'},
            {name:'新沟镇街道',id:'597efcd05cce41a1aa60196603d33625'},
            {name:'辛安渡街道',id:'36b0cb224f5846a0a84c55b55b268ed6'}
          ]
				},
			],
		};
		myChart.setOption(option);
		// 监听点击事件
		myChart.on('click', (params) => {
			this.$router.replace({ path: '/portal/net/siteDetail' + '?id=' + params.data.id })
		});
	},
	methods: {

	}

};
</script>

<style scoped lang="scss"></style>
